<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Div布局页面</title>
    <meta name="Keywords" content="study,学习练习"/>
    <meta name="Description" content="这是个人学习网页"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="author" content="john_zhang" />
    <link rel="stylesheet" href="./css/reset.css">
    <style type="text/css">
        #main{
            width:200px;
            height:200px;
            border:1px solid green;
            margin:20px;
            text-align: center;
            float:left;
        }

        #part1{
            width: 100px;
            height: 100px;
            background:blue;
            float:left;
        }

        #part2{
            width: 100px;
            height:100px;
            background:green;
            float:left;
        }

        #part3{
            width:100px;
            height:100px;
            background:yellow;
            float:left;
            clear:left;/*清除left*/
        }

        #part4{
            width:100px;
            height:100px;
            background:red;
            float:left;
        }

        #main2{
            width:200px;
            height:200px;
            background:yellow;
            float:left;
            margin:20px;
            border:10px;
            border-color: blue;
        }
        #part5{
            width:100px;
            height:100px;
            background:green;
            float: left
        }

        #part6{
            width:100px;
            height:100px;
            background:red;
            float:left;
        }

        /*三角形*/
        #tiganle-top{
            width:0px;
            height:0px;
            border-top: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            float:left;
            margin:20px;
        }

        #tiganle-left{
            width:0px;
            height:0px;
            border-left: 100px solid red;
            border-top: 100px solid transparent;
            float:left;
            margin:20px;
        }

        #tiganle-right{
            width:0px;
            height:0px;
            border-top:100px solid red;
            border-left:100px solid green;
            border-right:100px solid gray;
            border-bottom:100px solid yellow;
            float:left;
            margin:20px;
        }


        /*圣诞树*/
        #chr{
            width: 200px;
            height: 400px;
            border:2px solid red;
            margin: 20px;
            clear: both;
        }

        #tree1{
            width:0px;
            height:0px;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom:50px solid red;
            margin: 0 auto;
        }

        #tree2{
            width:50px;
            height:0px;
            border-left:45px solid transparent;
            border-right: 45px solid transparent;
            border-bottom: 45px solid red;
            margin:0 auto;
        }

        #tree3{
            width:90px;
            height:0px;
            border-left:45px solid transparent;
            border-right: 45px solid transparent;
            border-bottom: 45px solid red;
            margin:0 auto;
        }

        #tree4{
            width:20px;
            height:60px;
            background: gray;
            margin:0 auto;
        }

        #box{
            width:100px;
            height:100px;
            padding:30px;
            background:gray;
            margin:0 auto;
        }
    </style>

</head>
<body>
<div id="main">
    <div id="part1">part1</div>
    <div id="part2">part2</div>
    <div id="part3">part3</div>
    <div id="part4">part4</div>
</div>
<div id="main2">
    <div id="part5"></div>
    <div id="part6"></div>
</div>

<div id="tiganle-top"></div>
<div id="tiganle-left"></div>
</br>
<div id="tiganle-right"></div>

<div id="chr">
    <div id="tree1"></div>
    <div id="tree2"></div>
    <div id="tree3"></div>
    <div id="tree4"></div>
    <div id="box"></div>
</div>
</body>
</html>